<template>
  <div class="note-list-container">
    <!-- 表格头部 -->
    <div class="table-header">
      <!-- 搜索条件 -->
      <div class="search-condition">
        <a-row>
          <div class="left-search">
            <a-col :span="4">
              <a-form-item label="手机号:" v-bind="formItemStyle">
                <a-input-search
                  v-model="searchParams.telephone"
                  allow-clear
                  @search="onQueryClk"
                  placeholder="请输入手机号查询"
                  enter-button
                >
                </a-input-search>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item style="margin-top: -3px;" label="评价内容:" v-bind="formItemStyle">
                <a-select
                  style="width: 100%;"
                  v-model="searchParams.evaluationContent"
                  allow-clear
                  @change="onQueryClk"
                  placeholder="不限"
                  enter-button
                >
                  <a-select-option 
                    v-for="item in EVALUATION_CONTENT_TYPE" :key="item.value"
                    :value="item.value"
                  >
                   {{ item.label}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="时间选择:" style="margin-top: -3px;" v-bind="formItemStyle">
                <a-range-picker
                  :show-time="{ format: 'HH:mm' }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onChange"
                  @ok="onOk"
                />
              </a-form-item>
            </a-col>
          </div>
          <!-- 操作区域 -->
          <div class="operation">
            <a-button type="primary" @click="handleBack">返回</a-button>
          </div>
        </a-row>
      </div>
    </div>
    <!-- 表单内容 -->
    <div class="table-content">
      <a-table
        :rowKey="(record) => record.dataIndex"
        :columns="columns"
        :data-source="tableData"
        :loading="tableLoading"
        bordered
        :pagination="false"
      >
        <template slot="evaluationTime" slot-scope="row">
          {{ timeFilter(+row, '年月日时分') }}
        </template>
        <template slot="evaluationContent" slot-scope="row">
          <span style="word-break: break-all">
            {{ row }}
          </span>
        </template>
      </a-table>
      <Pagination
        class="pagination"
        :loading.sync="tableLoading"
        :tableData.sync="tableData"
        :searchCondition="searchParams"
        :apiRequestCallback="apiRequest"
      >
      </Pagination>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/pagination/index.vue'
import { apiQueryEvaluationList } from '@/api/api.js'
const EVALUATION_CONTENT_TYPE = [
  {
    label: 1,
    value: 1
  },
  {
    label: 2,
    value: 2
  },
  {
    label: 3,
    value: 3
  }
]
export default {
  name: 'NoteList',
  components: {
    Pagination
  },
  data() {
    this.formItemStyle = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 }
    }
    return {
      EVALUATION_CONTENT_TYPE,
      tableLoading: false,
      tableData: [
        // {
        // "smsEvaluationId": "1233",
        // "messageId": "张三",
        // "licensePlateNumber": "湘A111",
        // driverName: '张三',
        // "name": "李四",
        // "telephone": "1764565655",
        // "evaluationContent": "1",
        // "evaluationTime": +new Date(),
        // "sendTime": +new Date()
        // }
      ],
      // 搜索条件
      searchParams: {
        searchClk: 0,
        telephone: null,
        startTime: null,
        endTime: null,
        evaluationContent: undefined,
      },
      apiRequest: apiQueryEvaluationList,
      columns: [
        // {
        //   title: '短信Id',
        //   dataIndex: 'messageId',
        //   align: 'center',
        //   width: 100,
        // },
        {
          title: '司机姓名',
          dataIndex: 'driverName',
          align: 'center',
          width: '10%',
        },
        {
          dataIndex: 'licensePlateNumber',
          title: '车牌号',
          align: 'center',
          width: '15%',

        },
        {
          dataIndex: 'name',
          title: '用车人姓名',
          align: 'center',
          width: '15%'
        },
        {
          dataIndex: 'telephone',
          title: '用车人电话',
          align: 'center',
          width: '20%'
        },
        {
          title: '评价内容',
          dataIndex: 'evaluationContent',
          key: 'evaluationContent',
          scopedSlots: {
            customRender: 'evaluationContent'
          }
        },
        {
          dataIndex: 'evaluationTime',
          title: '评价时间',
          align: 'center',
          key: 'evaluationTime',
          width: '20%',
          scopedSlots: {
            customRender: 'evaluationTime'
          }
        },
        // {
        //   dataIndex: 'sendTime',
        //   title: '发送时间',
        //   width: 150,
        //   align: 'center',
        //   key: 'sendTime',
        //   scopedSlots: {
        //     customRender: 'sendTime'
        //   }
        // },
      ]
    }
  },
  mounted() {
    this.onQueryClk()
  },
  methods: {
    onChange(data, dataStr) {
      this.searchParams.startTime = +data[0]
      this.searchParams.endTime = +data[1]
    },
    onOk(...args) {
      this.onQueryClk()
    },
    timeFilter(value, str) {
      let time = ''
      let date = new Date(value)
      let y = date.getFullYear()
      let M = date.getMonth() + 1
      let d = date.getDate()
      let h = date.getHours()
      let m = date.getMinutes()
      switch (str) {
        case '年月日':
          time = y + '-' + M + '-' + d
          break
        case '年月日时分':
          time =
            y +
            '-' +
            (M < 10 ? '0' + M : M) +
            '-' +
            d +
            ' ' +
            (h < 10 ? '0' + h : h) +
            ':' +
            (m < 10 ? '0' + m : m)
      }
      return time
    },
    onQueryClk(keepPage) {
      keepPage === true
        ? (this.searchParams.searchClk -= 1)
        : (this.searchParams.searchClk += 1)
    },
    // 处理返回
    handleBack() {
      this.$router.push({
        name: 'Home'
      })
    }
  }
}
</script>
<style scoped lang="less">
.note-list-container {
  padding: 1rem;
  .search-condition {
    position: relative;
    .operation {
      position: absolute;
      top: 0;
      right: 20px;
    }
  }
}
</style>
